<template>
  <div @click="whetherOrNotToCheck(item)" v-for="(item, index) in languageList" :key="index" class="language-list-li flex middle between">
    <div class="language-list-li-left flex middle">
      <van-image width="48px" height="32px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      <div class="addApay-card-num flex middle">
        澳大利亚
      </div>
    </div>
    <div v-if="item.status" class="language-list-li-right">
      <img src="@/assets/images/icon/my-account/six-success.png">
    </div>
  </div>
</template>
  
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
defineProps({
  languageList: {
    type: Array,
    default: []
  },
});
const emit = defineEmits()


const languageList = ref([
  {
    status: true,
    id:1
  },
  {
    status: false
    ,
    id:2
  },
  {
    status: false,
    id:3
  },
  {
    status: false,
    id:4
  },
  {
    status: false,
    id:5
  },
  {
    status: false,
    id:6
  },
])

const whetherOrNotToCheck=(selectedItem)=>{
  languageList.value.forEach(item => {
    item.status = item.id === selectedItem.id;
  });
}

</script>
  
<style scoped lang="scss">
.language-list-li {
  border-radius: 6px;
  padding: 12px 0px;
  border-bottom: 1px solid #EDEDED;

  .addApay-card-num {
    margin-left: 6px;
    font-size: 8px;
    font-weight: 600;
  }

  &-left {
    :deep(.van-image__img) {
      border-radius: 2px;
    }
  }

  &-right {
    font-size: 7px;
    font-weight: 600;
    color: #1642F4;

    &>img {
      height: 12px;
    }
  }
}
</style>
  